<template>
<div class="wrap">
  <!-- 有数据 -->
  <div 
    class="line"
    v-if="type"
  >

    <div v-if="type !== 2" class="yin">
      <div class="left"></div>
      <div class="right"></div>
    </div>

    <div v-else class="yang">
      <div class="yang-content"></div>
    </div>
  </div> 

  <!-- 没数据 -->
  <div 
    class="empty"
    v-else
  >
  </div>

  <div class="title">
    {{type ? title : ''}}
  </div>

</div>
</template>

<script>
export default {
  props:['type', 'title'], // type: 0 - 空 ；1 - 阳 ； 2 - 阴
  name: 'Yao'
}
</script>

<style scoped>
.wrap {
  display: flex;
  align-items: center;
}

.yin,
.yang {
  width: 180px;
  height: 30px;
}

.yin {
  display: flex;
  justify-content: space-between;
}

.left {
  height: 100%;
  width: 45%;
  background: black;
}
.right {
  height: 100%;
  width: 45%;
  background: black;
}

.yang-content {
  height: 100%;
  background: red;
}

.empty {
  box-sizing: border-box;
  width: 180px;
  height: 30px;
  border: 1px dashed rgb(180, 179, 179);
}

.title {
  margin-left: 20px;
  width: 40px;
}
</style>